<template>
  <div class="input-box">
    <label class="simple-input-content" for="inputCode">
      <span class="highlight">{{ inputCode.slice(0, 1) }}</span>
      <span :class="inputCode.length > 1 ? 'highlight' : ''">{{
        inputCode.slice(1, 2)
      }}</span>
      <span :class="inputCode.length > 2 ? 'highlight' : ''">{{
        inputCode.slice(2, 3)
      }}</span>
      <span :class="inputCode.length > 3 ? 'highlight' : ''">{{
        inputCode.slice(3, 4)
      }}</span>
      <span v-if="type === 1" :class="inputCode.length > 4 ? 'highlight' : ''">{{
        inputCode.slice(4, 5)
      }}</span>
      <span v-if="type === 1" :class="inputCode.length > 5 ? 'highlight' : ''">{{
        inputCode.slice(5, 6)
      }}</span>
    </label>
    <input
      id="inputCode"
      v-model.trim="inputCode"
      type="number"
      placeholder="请输入六位数字验证码"
      :maxlength="inputMaxLength"
      @input="inputCodeChange"
    />
  </div>
</template>

<script>
export default {
  name: "VerifyCode",
  props: {
    type: Number
  },
  data() {
    return {
      inputCode: "",
      inputMaxLength: 6
    };
  },
  watch: {
    type (newVal) {
      // 1 的时候是移动积分验证码6位  2 的时候是畅由积分验证码4位
      if (newVal === 1) {
        this.inputMaxLength = 6
      } else {
        this.inputMaxLength = 4
      }
      this.inputCode = ''
    }
  },
  methods: {
    inputCodeChange(e) {
      let value = e.target.value;
      if (value.length > this.inputMaxLength) value = value.slice(0, this.inputMaxLength);
      this.inputCode = value
      this.$emit('onCodeChange', this.inputCode)
    },
  },
};
</script>

<style lang="scss" scoped>
.input-box {
  height: 45px;
  width: 100%;
  position: relative;
  input {
    position: absolute;
    z-index: -100;
    top: 10px;
    left: 2000px;
  }
  // 六个span时的样式
  .simple-input-content {
    display: flex;
    justify-content: space-between;
    span {
      vertical-align: middle;
      display: inline-block;
      background-color: #eee;
      height: 44px;
      line-height: 44px;
      text-align: center;
      width: 44px;
      border-radius: 5px;
    }
  }
  /* 去掉input[type=number]浏览器默认的icon显示 */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    // chrome
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  input {
    // 火狐
    -moz-appearance: textfield;
  }
}
</style>